<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>宁阳县天气预报</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #4bb3fd 0%, #2574f5 100%);
            min-height: 100vh;
            color: #fff;
            margin: 0;
            padding: 15px;
            box-sizing: border-box;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        .current-weather {
            text-align: center;
            padding: 15px 0;
        }
        .big-icon {
            font-size: clamp(120px, 30vw, 180px);
            margin: 15px 0;
        }
        .forecast-title {
            text-align: center;
            margin: 30px 0 15px;
            font-size: clamp(18px, 5vw, 22px);
            font-weight: bold;
        }
        .forecast-list {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 10px 0 20px;
            scrollbar-width: thin;
        }
        .forecast-list::-webkit-scrollbar {
            height: 6px;
        }
        .forecast-list::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }
        .forecast-item {
            min-width: 100px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 10px;
            padding: 12px 8px;
            text-align: center;
            backdrop-filter: blur(5px);
            flex-shrink: 0;
        }
        .small-icon {
            font-size: clamp(30px, 8vw, 40px);
            margin: 8px 0;
        }
        /* 文字大小响应式调整 */
        .city-name {
            font-size: clamp(20px, 6vw, 32px);
        }
        .update-time {
            font-size: clamp(14px, 4vw, 16px);
        }
        .weather-desc {
            font-size: clamp(18px, 5vw, 24px);
        }
        .current-temp {
            font-size: clamp(40px, 12vw, 60px);
        }
        .weather-detail {
            font-size: clamp(14px, 4vw, 16px);
        }
        .forecast-text {
            font-size: clamp(12px, 3vw, 14px);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 标题区域 -->
        <div class="header">
            <h1 class="city-name font-bold">宁阳县</h1>
            <p id="update-time" class="update-time opacity-80 mt-1">数据加载中...</p>
        </div>

        <!-- 当前天气（中间大图标） -->
        <div class="current-weather">
            <div id="current-icon" class="big-icon">
                <i class="fa fa-cloud"></i>
            </div>
            <div class="weather-desc" id="current-desc">加载中...</div>
            <div class="current-temp font-bold mt-3" id="current-temp">--°</div>
            <div class="flex justify-center gap-6 mt-5 flex-wrap">
                <span class="weather-detail"><i class="fa fa-tint mr-1"></i> 湿度: <span id="current-humidity">--</span>%</span>
                <span class="weather-detail"><i class="fa fa-wind mr-1"></i> 风力: <span id="current-wind">--</span></span>
            </div>
        </div>

        <!-- 未来7天预报 -->
        <div class="forecast-title">未来7天预报</div>
        <div class="forecast-list" id="forecast-container">
            <!-- 动态生成7天预报 -->
            <div class="forecast-item forecast-text">加载中...</div>
        </div>
    </div>

    <script>
        // 根据天气状况匹配图标
        function getWeatherIcon(desc) {
            desc = desc.toLowerCase();
            if (desc.includes('晴')) return '<i class="fa fa-sun-o text-yellow-300"></i>';
            if (desc.includes('阴')) return '<i class="fa fa-cloud text-gray-200"></i>';
            if (desc.includes('雨')) return '<i class="fa fa-tint text-blue-200"></i>';
            if (desc.includes('雪')) return '<i class="fa fa-snowflake-o text-blue-100"></i>';
            if (desc.includes('雷')) return '<i class="fa fa-bolt text-yellow-400"></i>';
            if (desc.includes('雾')) return '<i class="fa fa-cloud text-gray-300"></i>';
            return '<i class="fa fa-question-circle"></i>';
        }

        // 格式化日期为星期
        function formatWeekday(dateStr) {
            const date = new Date(dateStr);
            const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            return weekdays[date.getDay()];
        }

        // 页面加载后立即请求数据
        window.onload = async function() {
            try {
                // 调用指定API获取天气数据
                const apiUrl = 'https://api.bugpk.com/api/weather?city=宁阳县';
                const response = await fetch(apiUrl);
                const result = await response.json();

                // 检查API返回状态
                if (result.code !== 200) {
                    throw new Error('天气数据获取失败: ' + (result.msg || '未知错误'));
                }

                const data = result.data;
                const today = data.forecast[0]; // 当前天气数据
                const forecast = data.forecast; // 未来7天预报

                // 更新当前天气信息
                document.getElementById('current-icon').innerHTML = getWeatherIcon(today.type);
                document.getElementById('current-desc').textContent = today.type;
                document.getElementById('current-temp').textContent = `${today.high}°`;
                document.getElementById('current-humidity').textContent = data.shidu;
                document.getElementById('current-wind').textContent = today.fengxiang + today.fengli;

                // 更新数据时间
                const updateTime = new Date(data.update_time);
                document.getElementById('update-time').textContent = `更新于: ${updateTime.toLocaleString()}`;

                // 生成未来7天预报
                const forecastContainer = document.getElementById('forecast-container');
                forecastContainer.innerHTML = ''; // 清空加载提示

                forecast.forEach(day => {
                    const item = document.createElement('div');
                    item.className = 'forecast-item';
                    item.innerHTML = `
                        <div class="font-medium forecast-text">${formatWeekday(day.date)}</div>
                        <div class="small-icon">${getWeatherIcon(day.type)}</div>
                        <div class="forecast-text">${day.type}</div>
                        <div class="mt-2 forecast-text">${day.low}~${day.high}</div>
                    `;
                    forecastContainer.appendChild(item);
                });

            } catch (error) {
                console.error('加载失败:', error);
                document.getElementById('current-desc').textContent = '加载失败';
                document.getElementById('forecast-container').innerHTML = 
                    '<div class="forecast-item forecast-text text-red-300">获取失败</div>';
            }
        };
    </script>
</body>
</html>
